<!DOCTYPE html>
<html>

<head lang="en">
	<meta>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="keywords" content="">
	<title>护照申请表格</title>
	
	<link href="./assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
	<link href="./assets/css/validate.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="./assets/css/build_standalone.less">
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/approvallist.css">
	<link rel="stylesheet" href="./css/approvallist_bootstrap.css">

	<script type="text/javascript" src='./assets/js/jquery.min.js'></script>
	<script type="text/javascript" src='./assets/js/bootstrap.min.js'></script>
	<script type="text/javascript" src="./assets/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="./assets/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript" src="./js/jsAddress.js"></script>
	<script type="text/javascript" src="./js/jquery-validation/1.11.1/jquery.validate.min.js"></script>
	<script type="text/javascript" src="./js/jquery-validation/1.11.1/messages_bs_zh.js"></script>
	<script type="text/javascript" src='./js/applicationprocess.js'></script>
</head>

<body>
	<div class='common_header_wrapper'>
		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="javascript:;">公益护照申请表</a>
				</div>
				<!--
	  <div class='common_headeruserinfo_wrapper'>
					<span class='avatar'>
					   <img src="./assets/img/timg.jpg">
					</span>
		<label>申请人</label>
		-->
			</div>
	</div>
	</nav>
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="common_process_wrapper main">
				<form id="inputForm" class="passport_pickdate_wrapper form-horizontal" role="form" action="/passportApply/save" method="post">
					<div class="form-group col-lg-12">
						<label class="col-lg-3 control-label">区域选择</label>
						<div class="col-lg-3 col-lg-10">
							<select class="form-control" id="cmbProvince" name="cmbProvince" disabled></select>
						</div>
						<div class="col-lg-3 col-lg-10" style="display: none;">
							<select class="form-control" id="cmbCity" name="cmbCity"></select>
						</div>
						<div class="col-lg-3 col-lg-10">
							<select class="form-control" id="cmbArea" name="cmbArea" required="required"></select>
						</div>
						<script type="text/javascript">
						</script>
					</div>
					<div class="form-group col-lg-12" id="address_div">
						<label class="col-lg-3 control-label">预约基地</label>
						<div class="col-lg-9 col-lg-10">
							<select class="form-control" id="bassAddressId" name="bassAddressId" required="required"></select>
						</div>
					</div>
					<div class="form-group col-lg-12">
						<label class="col-lg-3 control-label">预约日期</label>
						<div class="col-lg-3">
							<input class='form-control' name="appointmentDate" type="text" value="" required=" " id="appointmentDate" onchange="javascript:;">
						</div>
						<label class="col-lg-2 control-label">时间段</label>
						<div class="col-lg-4">
							<select class="form-control" name="appointmentTime" id="appointmentTime" required=""></select>
						</div>
					</div>
					<div class="form-group summitbtn">
						<div class="col-lg-offset-2 col-lg-10">
							<button type="submit" id="submitbtn" class="btn btn-primary btn-lg btn-block">提交</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
<script>
($(function() {
	var next = {
		main: function() {
			var that = this;
			$('#cmbArea').change(function() {
				that.findBaseAddress();
			})
			$('#bassAddressId').change(function() {
				that.selectDay();
			})
		},
		vaildeate: function() {
			// 在键盘按下并释放及提交后验证提交表单
			$("#inputForm").validate({
				//debug:true,
				rules: {
					appointmentTime: "required",
					cmbArea: "required",
					bassAddressId: "required",
					datetimepicker: "required",
					timelist: "required"
				},
				messages: {
					appointmentTime: "请选择预约日期",
					cmbArea: "请选择区县",
					bassAddressId: "请选择预约基地",
					datetimepicker: "请选预约日期",
					timelist: "请选择时间段"
				}
			});
		},
		selectDay: function() {
			var bassAddressId = $("#bassAddressId").val();
			var url = "http://jd.cvssp.cn/passportApply/findAddressAppointTime/" + bassAddressId;
			var html = "";
			var dtst = new Date($("#appointmentDate").val());
			var day = dtst.getDate();
			if (day > 0 && day < 10) {
				day = "0" + day;
			}
			var dt = dtst.getFullYear() + '-' + (dtst.getMonth() + 1) + '-' + day;
			$.getJSON(url, function(result) {
				console.log(result)
				if (result.code == 0) {
					if (result.data.length > 0) {
						for (var i = 0; i < result.data.length; i++) {
							var day = result.data[i].day;
							var datetimes = result.data[i].times;
							if (day == dt) {
								for (var n = 0; n < datetimes.length; n++) {
									html += '<option>' + datetimes[n] + '</option>';
								}
							}
						}
					}
					document.getElementById('appointmentTime').innerHTML = html;
				}
			});
		},
		findBaseAddress: function() {
			var area = $("#cmbArea").val();
			if ("请选择" == area) {
				alert("请选择区县");
				return;
			}
			var url = "http://jd.cvssp.cn/passportApply/findAddress/" + area;
			var html = "";
			$.getJSON(url, function(result) {
				console.log(url)
				console.log(result)
				if (result.code == 0) {
					if (result.data.length > 0) {
						for (var i = 0; i < result.data.length; i++) {
							html += '<option value="' + result.data[i].id + '">' + result.data[i].name + '</option>';
						}
						$('#bassAddressId').removeAttr("disabled");
					}
				} else {
					html += '<option value="0">该区暂无可预约基地</option>';
				}
				$('#bassAddressId').html(html);
			});
		},
		datetimepicker: function() {
			var date = new Date();
			var startDate = new Date(date);
			var endDate = new Date(date);
			startDate.setDate(date.getDate() + 5);
			endDate.setDate(date.getDate() + 10);

			$('#appointmentDate').datetimepicker({
				format: 'yyyy-mm-dd',
				minView: 2,
				language: 'zh-CN',
				autoclose: true,
				todayHighlight: true,
				forceParse: false,
				startDate: new Date(startDate),
				endDate: new Date(endDate)
			}).on('changeDate', function() {
				alert('pickdate')
				console.log($(this).html())
			})
		},
		init: function() {
			this.datetimepicker();
			this.main();
			addressInit('cmbProvince', 'cmbCity', 'cmbArea', '上海市', '上海市', '');
		}
	}
	next.init();
}))(jquery)
</script>

</html>
